<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <link href="css/mui.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
    <style type="text/css">
    	
    </style>
</head>
<body>	
<header  class="mui-bar mui-bar-nav">
	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	<h1 class="mui-title">美甲店</h1>
</header>
<div class="mui-content" style="background: white;">
	<div class="mui-col-xs-12" style="height: 200px; position: relative;background-color: rgb(0,0,0);">
		<img id='avatar' style="width: 100%; height: 100%;" src=""/>
		<div style="width: 100%; background-color: rgba(0,0,0,0.3);  position: absolute; bottom: 0px;  height: 50px;">
			<div class="mui-col-xs-8 mui-pull-left" style="height:100%; padding-left: 6%; padding-top:3%;">
				<h3 style=" color: white;">综合评价<span class="iconfont" style="padding-left: 4px; color: rgb(230,0,108);" >&#xe604;&#xe604;&#xe604;</span></h3></div>
			<div class="mui-col-xs-4 mui-pull-left mui-text-right" style="height:100%; padding-right: 6%; padding-top:3%;"><h2><span class="mui-icon mui-icon-star" style=" color: white;"></span></h2></div>
		</div>
		<div style="width: 80px; height: 80px; position: absolute; top: 32px; left: 6.5%; border-radius: 50%; background: rgb(216,221,212); padding: 2px;">
			<img style="width: 80px; height: 80px;border-radius: 80px;" src="img.jpg"/>
		</div>
		<div style="width: 50%; height: 30%;  position: absolute; top: 28%; left: 38%; ">
			<h1 style="  height: 100%; color: white;">绝色美甲</h1>
		</div>
	</div>
	<div class="mui-col-xs-12 mui-text-center" style="height: 73px; padding-top: 20px;">
		<button class="mui-btn mui-btn-negative mui-btn-outlined" style="width: 24%; height: 61%; ">预约</button>
	</div>
	<div class="mui-col-xs-12 mui-text-left" style="height: 45px; border-top:solid 1px rgb(204,204,204); line-height: 45px; padding-left: 2.7%;padding-right: 2.7%;">
		<span class="mui-icon mui-icon-location" style="font-size: 1.8rem; color:rgb(188,213,67);"></span><span style="padding-left: 2.7%; ">前海湾</span><span class="mui-icon mui-icon-arrowright mui-pull-right" style="padding-top: 12px;"></span>
	</div>
	<div class="mui-col-xs-12 mui-text-left" style="height: 45px; border-top:solid 1px rgb(204,204,204);; line-height: 45px; padding-left: 2.7%;padding-right: 2.7%;">
		<span class="mui-icon mui-icon-phone"style="font-size: 1.8rem; color: rgb(230,0,108);" ></span><span style="padding-left: 2.7%; ">13800138000</span><span class="mui-icon mui-icon-arrowright mui-pull-right" style="padding-top: 12px;"></span>
	</div>
	<div class="mui-col-xs-6 mui-text-left mui-pull-left mui-text-center " style="height: 45px;; border-top:solid 1px rgb(204,204,204);;border-bottom:solid 1px rgb(204,204,204);;border-right:solid 1px rgb(204,204,204);; line-height: 45px; ">	
	<span class="mui-icon mui-icon-compose" style="font-size: 1.8rem;color: rgb(96,178,247);"></span><span>评价</span>
	</div>
	<div class="mui-col-xs-6 mui-text-left mui-pull-left mui-text-center" style="height: 45px;; border-top:solid 1px rgb(204,204,204);;border-bottom:solid 1px rgb(204,204,204);; line-height: 45px; margin-bottom: 10px;">	
	<span class="iconfont" style="font-size: 1.5rem; padding: -2px; margin-right: 5px;color: rgb(230,0,108);">&#xe600;</span><span>粉丝</span>
	</div>
	<div class="mui-col-xs-12">
		<div id="slider" class="mui-slider">
	<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-control-negative" style="height: 45px; line-height: 45px; background-color: rgb(254,223,223);">
		<a class="mui-control-item" href="#item1mobile" style="line-height: 45px;">
				约作品（120）
			</a>
		<a class="mui-control-item" href="#item2mobile">
				约技师（120）
			</a>
		
	</div>
	<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>
	<div class="mui-slider-group">
		<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
			<div class="mui-col-xs-6 mui-pull-left" style=" position: relative; padding: 5px; ">
				<img width="100%" src="img.jpg"/>
				<div class="mui-text-center" style="width: 97%; height: 21%; background-color: rgba(255,255,255,0.3); color: white; position: absolute; bottom: 11px;">sdfsdfdf</div>
			</div>
			<div class="mui-col-xs-6 mui-pull-left" style=" position: relative; padding: 5px; ">
				<img width="100%" src="img.jpg"/>
				<div class="mui-text-center" style="width: 97%; height: 21%; background-color: rgba(255,255,255,0.3); color: white; position: absolute; bottom: 11px;">sdfsdfdf</div>
			</div>
		</div>
		<div id="item2mobile" class="mui-slider-item mui-control-content">
			<div class="mui-loading">
				<ul class="mui-table-view">
				
				<li class="mui-table-view-cell">
					第一个选项卡子项-2
				</li>
				<li class="mui-table-view-cell">
					第一个选项卡子项-3
				</li>
				<li class="mui-table-view-cell">
					第一个选项卡子项-4
				</li>
				<li class="mui-table-view-cell">
					第一个选项卡子项-5
				</li>
			</ul>
			</div>
		</div>
		
	</div>
</div>
		
	</div>
</div>
<script type="text/javascript">

	$.get("http://120.25.207.29/shop/12",function(result){
     var shop_info = result.data.shop_info;
     $('#avatar').attr('src',shop_info.avatar);
     console.log(shop_info.avatar);
  });

  
</script>
</body>
	
</html>